<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
	<meta charset="utf-8" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<title>更换轮胎</title>
	<link rel="stylesheet" href="../iconfont/iconfont.css">
	<link rel="stylesheet"
		href="https://www.jkzlrs.com/concat/mobile/??3.0/cross/css/cross.css,3.0/cross/css/ui.all.css"
		type="text/css" />
	<link rel="stylesheet" href="../css/style.css" type="text/css" />
</head>

<body>
	<main class="c-main">
		<header class="detail-header">
			<p class="tit">更换轮胎</p>
			<p class="price">¥1000.00</p>
		</header>

		<!-- <div class="detail-menu">
			<div class="detail-menu-box">
				<a href="javascript:;" class="mb-col curr">产品说明</a>
				<a href="javascript:;" class="mb-col">处理中</a>
			</div>
		</div> -->

		<section class="detail-tabcont">
			<div class="pb20 bgc-fff">
				<img src="../del/img1.png" alt="" class="detail-banner">
			</div>

			<div class="pb15 mb10 bgc-fff">
				<img src="../del/img1.png" alt="" class="detail-banner">
				<img src="../del/img1.png" alt="" class="detail-banner">
				<img src="../del/img1.png" alt="" class="detail-banner">
			</div>

			<div class="bgc-fff plr10 mb10">
				<div class="detail-form-title">
					<i class="iconfont icon-kehuxinxi"></i>
					<p>客户信息</p>
				</div>
				<ul class="doc-form">
					<li>
						<div class="form-key">姓名</div>
						<div class="form-info">
							<input type="text" placeholder="请输入姓名" class="form-text">
						</div>
					</li>
					<li>
						<div class="form-key">身份证号</div>
						<div class="form-info">
							<input type="text" placeholder="请输入身份证号码" class="form-text">
						</div>
					</li>
					<li>
						<div class="form-key">联系电话</div>
						<div class="form-info">
							<input type="tel" placeholder="请输入被服务人联系电话" class="form-text">
						</div>
					</li>
				</ul>
				<div class="detail-form-title">
					<i class="iconfont icon-yuyuexinxi"></i>
					<p>预约信息</p>
				</div>
				<ul class="doc-form">
					<li class="islink">
						<div class="form-key">预约日期</div>
						<div class="form-info">
							<input type="text" placeholder="请选择预约日期" class="form-text" readonly data-time="date">
						</div>
					</li>
					<li class="islink">
						<div class="form-key">预约开始时段</div>
						<div class="form-info" id="starTime">
							<input type="text" placeholder="请选择预约开始时段" class="form-text" readonly>
						</div>
					</li>
					<li class="islink">
						<div class="form-key">预约结束时段</div>
						<div class="form-info" id="endTime">
							<input type="tel" placeholder="请选择预约结束时段" class="form-text" readonly>
						</div>
					</li>
					<li class="islink">
						<div class="form-key">服务城市</div>
						<div class="form-info">
							<input type="text" placeholder="请选择服务地区" class="form-text" readonly data-opera="area">
						</div>
					</li>
					<li>
						<div class="form-key">服务详细地址</div>
						<div class="form-info">
							<textarea name="" rows="3" placeholder="请输入服务详细地址" class="form-texa"></textarea>
						</div>
					</li>
				</ul>
				<div class="detail-form-title">
					<i class="iconfont icon-cheliangxinxi"></i>
					<p>车辆信息</p>
				</div>
				<ul class="doc-form">
					<li>
						<div class="form-key">车牌号</div>
						<div class="form-info">
							<input type="text" placeholder="请输入车牌号码" class="form-text">
						</div>
					</li>
					<li>
						<div class="form-info">
							<div class="upload-tit c-555">上传材料<span class="c-f12 c-ccc">（最多9张）</span></div>
							<p class="c-f12 c-999 mb5">为更好服务，您可以上传相关图片，最多允许上传9张图片</p>
							<ul class="file-list c-photohold">
								<li>
									<div class="file-img">
										<img src="https://www.jkzlrs.com/concat/mobile/3.0/cross/images/d-common.png"
											class="c-photoswipe">
										<a href="javascript:;" class="file-delete"><i
												class="iconfont icon-shanchu"></i></a>
									</div>
								</li>
								<li>
									<div class="file-img">
										<img src="https://www.jkzlrs.com/concat/mobile/3.0/cross/images/d-common.png"
											class="c-photoswipe">
										<a href="javascript:;" class="file-delete"><i
												class="iconfont icon-shanchu"></i></a>
									</div>
								</li>
								<li class="file-add"></li>
							</ul>
						</div>
					</li>
					<li>
						<div class="form-info">
							<div class="upload-tit c-555">车况描述</div>
							<textarea name="" rows="5" placeholder="请描述车辆情况，500字以内" class="form-texa desBox"
								maxlength="500"></textarea>
							<div class="inqu-num">0/500</div>
						</div>
					</li>
				</ul>
			</div>
		</section>

		<section class="detail-tabcont c-hide">

		</section>

		<div class="fixed-bs-box">
			<div class="fixed-bs order-fixed-bot">
				<p class="bot-price">合计：<span>¥10000.00</span></p>
				<a href="javascript:;" class="bot-btn">立即预约</a>
			</div>
		</div>

		<!-- 选择地区 -->
		<div class="iarea-hold c-hide">
			<div class="iarea-choose">
				<div class="iarea-top"><a href="javascript:;" class="iarea-cancel">取消</a>所在省市</div>
				<div class="iarea-sel">
					<a href="javascript:;" class="curr">请选择</a>
				</div>
				<div class="iarea-box">
					<div class="preiarea">
						<!--<span class="local-loading"></span>-->
						<ul class="province-ul">
							<li data-val="福建省" data-code="01">福建省</li>
							<li data-val="福建省" data-code="01">福建省</li>
							<li data-val="福建省" data-code="01">福建省</li>
							<li data-val="福建省" data-code="01">福建省</li>
							<li data-val="福建省" data-code="01">福建省</li>
							<li data-val="福建省" data-code="01">福建省</li>
							<li data-val="福建省" data-code="01">福建省</li>
							<li data-val="福建省" data-code="01">福建省</li>
							<li data-val="福建省" data-code="01">福建省</li>
							<li data-val="福建省" data-code="01">福建省</li>
						</ul>
					</div>
					<div class="preiarea c-hide">
						<!--<span class="local-loading"></span>-->
						<ul class="city-ul">
							<li data-val="福州市" data-code="02">福州市</li>
							<li data-val="福州市" data-code="02">福州市</li>
							<li data-val="福州市" data-code="02">福州市</li>
							<li data-val="福州市" data-code="02">福州市</li>
							<li data-val="福州市" data-code="02">福州市</li>
							<li data-val="福州市" data-code="02">福州市</li>
						</ul>
					</div>
					<div class="preiarea c-hide">
						<!--<span class="local-loading"></span>-->
						<ul class="zone-ul">
							<li data-val="鼓楼区" data-code="03">鼓楼区</li>
							<li data-val="鼓楼区" data-code="03">鼓楼区</li>
							<li data-val="鼓楼区" data-code="03">鼓楼区</li>
							<li data-val="鼓楼区" data-code="03">鼓楼区</li>
							<li data-val="鼓楼区" data-code="03">鼓楼区</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="iarea-choose-mb"></div>
		</div>
	</main>


	<script type="text/javascript"
		src="https://f1.yihuimg.com/concat/mobile/??3.0/cross/js/jquery/2.1.3/jquery.js,3.0/cross/js/cross.ui.js"></script>
	<link rel="stylesheet" href="../widget/cmarea/css/cmarea.css" type="text/css">
	<link rel="stylesheet" href="../widget/cmpick/src/cmpick.css">
	<script src="../widget/cmpick/src/cmpick.js"></script>
	<link rel="stylesheet" href="../widget/photoswiper/css/photoswipe.css" type="text/css" />
	<script type="text/javascript" src="../widget/photoswiper/js/photoswipe.js"></script>
	<script>
		$(function () {
			//字数统计
			$('.desBox').on('input propertychange', function () {
				$('.inqu-num').text($(this).val().length + '/500');
			});

			//删除
			$('.c-main').on('click', '.file-delete', function () {
				var _this = $(this);
				myLayer.confirm({
					title: '提示',
					con: '确定删除?',
					cancel: function () { },
					ok: function () {
						_this.parent().parent().remove();
					},
				});
			});

			//日期
			$('input[data-time="date"]').on('click', function () {
				var _this = $(this);
				cmpick.datePicker({
					title: '选择预约日期',
					// defaultValue: [1990, 1, 1],
					onConfirm: function (result) {
						_this.val(result[0] + '-' + (result[1] < 10 ? '0' : '') + result[1] + '-' + (result[2] < 10 ? '0' : '') + result[2]);
					},
					id: 'datePicker'
				});
			});

			// 开始，结束时间
			let hours = [];
			let minite = [];
			if (!hours.length) {
				hours = costomDatePicker(hours, 8, 21, "时")
			}
			if (!minite.length) {
				minite = costomDatePicker(minite, 0, 60, "分")
			}

			$('#starTime').on('click', function () {
				var _this = $(this);
				cmpick.picker(hours, minite,{
					title: '请选择预约开始时段',
					defaultValue: [new Date().getHours(), new Date().getMinutes()],
					onConfirm: function (result) {
						
						_this.find("input").val(result[0].value + ':' + result[1].value);
					},
					id: 'start'+new Date()
				});
			});

			$('#endTime').on('click', function () {
				var _this = $(this);
				cmpick.picker(hours, minite,{
					title: '请选择预约结束时段',
					defaultValue: [new Date().getHours(), new Date().getMinutes()],
					onConfirm: function (result) {
						
						_this.find("input").val(result[0].value + ':' + result[1].value);
					},
					id: 'end'+new Date()
				});
			});
		})

		//自定义日期:月时分秒
		function costomDatePicker(years, startTime, endTime, str) {
			for (let j = startTime; j < endTime; j++) {
				years.push({
					label: ('' + j).length === 1 ? '0' + j + str : '' + j + str,
					value: ('' + j).length === 1 ? '0' + j : '' + j,
				});
			}
			return years;
		};

			//选择地区(自定义)
			+ function ($) {
				var areaobj;
				//开始
				$('input[data-opera="area"]').on('click', function () {
					areaobj = $(this);
					$('.iarea-box').find('.preiarea:gt(0)').hide();
					$('.iarea-sel').find('a:gt(0)').remove();
					$('.iarea-sel').find('a:eq(0)').html('请选择').addClass('curr');
					$('.preiarea li').removeClass('curr');
					$('.iarea-hold').show();
				});
				$('.c-main').on('click', '.province-ul li', function () {  //选择省
					var pcode = $(this).attr('data-code'),
						pname = $(this).attr('data-val');
					$(this).addClass('curr').siblings().removeClass('curr');
					$('.iarea-box').find('.preiarea:gt(0)').hide();
					$('.iarea-sel').find('a:gt(0)').remove();
					$('.iarea-box').find('.preiarea:eq(1)').show();
					$('.iarea-sel').find('a:eq(0)').html(pname).attr('data-code', pcode).removeClass('curr');
					$('.iarea-sel').append('<a href="javascript:;" class="curr">请选择</a>');
				});

				$('.c-main').on('click', '.city-ul li', function () {  //选择市
					var ccode = $(this).attr('data-code'),
						cname = $(this).attr('data-val');
					var third = true;  //是否有3级
					if (third) {
						$(this).addClass('curr').siblings().removeClass('curr');
						$('.iarea-box').find('.preiarea:gt(1)').hide();
						$('.iarea-sel').find('a:gt(1)').remove();
						$('.iarea-box').find('.preiarea:eq(2)').show();
						$('.iarea-sel').find('a:eq(1)').html(cname).attr('data-code', ccode).removeClass('curr');
						$('.iarea-sel').append('<a href="javascript:;" class="curr">请选择</a>');
					} else {
						iareaResult(ccode, cname);
					}
				});
				$('.c-main').on('click', '.zone-ul li', function () { //选择区
					var zcode = $(this).attr('data-code'),
						zname = $(this).attr('data-val');
					$('.iarea-sel').find('a:eq(2)').html(zname).attr('data-code', zcode).removeClass('curr');
					iareaResult(zcode, zname);
				});

				$('.c-main').on('click', '.iarea-sel a', function () {
					$(this).addClass('curr').siblings().removeClass('curr');
					$('.preiarea').hide();
					$('.iarea-box').find('.preiarea').eq($(this).index()).show();
				});

				$('.c-main').on('click', '.iarea-choose-mb,.iarea-cancel', function () {
					$('.iarea-hold').hide();
				});

				function iareaResult(code, name) {
					var il = $('.iarea-sel a').length,
						rcode = code,
						rname = name;
					for (var x = il - 2; x >= 0; x--) {
						rcode = $('.iarea-sel a').eq(x).attr('data-code') + ' ' + rcode;
						rname = $('.iarea-sel a').eq(x).text() + ' ' + rname;
					}
					$('.iarea-hold').hide();
					areaobj.val(rname).attr('data-val', rname).attr('data-code', rcode);
				}
			}($);	
	</script>
</body>

</html>